// JavaScript Document
var moveOptions = {
    DragX:0,
    DragY:0,
    OffTop:0,
    OffLeft:0,
}

function Drag(){
	//初始化
	this.initialize.apply(this, arguments)
}
Drag.prototype = {
    //初始化
    initialize: function (drag, options) {
        this.drag = this.$(drag);
        this._x = this._y = 0;
        this._moveDrag = this.bind(this, this.moveDrag);
        this._stopDrag = this.bind(this, this.stopDrag);

        this.setOptions(options);

        this.handle = this.$(this.options.handle);
        this.maxContainer = this.$(this.options.maxContainer);

        this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;
        this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;

        this.limit = this.options.limit;
        this.lockX = this.options.lockX;
        this.lockY = this.options.lockY;
        this.lock = this.options.lock;

        this.onStart = this.options.onStart;
        this.onMove = this.options.onMove;
        this.onStop = this.options.onStop;

        this.handle.style.cursor = "grab";

        this.changeLayout();

        this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))
    },
    changeLayout: function () {
        this.drag.style.top = this.drag.offsetTop + "px";
        this.drag.style.left = this.drag.offsetLeft + "px";
        this.drag.style.position = "absolute";
        this.drag.style.margin = "0"
        //console.log('changeLayout');
        //links();
    },
    startDrag: function (event) {
        console.log(event);
        var event = event || window.event;

        this._x = event.clientX - this.drag.offsetLeft;
        this._y = event.clientY - this.drag.offsetTop;

        this.addHandler(document, "mousemove", this._moveDrag);
        this.addHandler(document, "mouseup", this._stopDrag);

        event.preventDefault && event.preventDefault();
        this.handle.setCapture && this.handle.setCapture();

        this.onStart()
    },
    moveDrag: function (event) {

        var event = event || window.event;
        if (event == undefined) {
            var iTop = 0;
            var iLeft = 0;
            if($(".ajp_scale").length>0){
                 $(".ajp_scale").css({"left": (-iLeft/currentScale)+"px"});
            }
            //goMove=true;
            //AfterMoveLink();
            if (this.lock) return;
            this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));
            this.lockY || (this.drag.style.top = iTop + "px");
            this.lockX || (this.drag.style.left = iLeft + "px");
            this.onMove() ;
     
        }
        else {
            var iTop = event.clientY - this._y;
            var iLeft = event.clientX - this._x;
            if($(".ajp_scale").length>0){
                 $(".ajp_scale").css({"left": (-iLeft/currentScale)+"px"});
            }
            //goMove=true;
            
            if (this.lock) return;
            
            //console.log('end Drag【Y:' + iTop + '】【X:' + iLeft + '】');
            this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));
            this.lockY || (this.drag.style.top = iTop + "px");
            this.lockX || (this.drag.style.left = iLeft + "px");
            event.preventDefault && event.preventDefault();
            this.onMove() ;
          
        }
        
    },
    stopDrag: function () {
        this.removeHandler(document, "mousemove", this._moveDrag);
        this.removeHandler(document, "mouseup", this._stopDrag);

        this.handle.releaseCapture && this.handle.releaseCapture();
        AfterMoveLink();
        this.onStop()

    },
    //参数设置
    setOptions: function (options) {
        this.options =
		{
		    handle: this.drag, //事件对象
		    limit: true, //锁定范围
		    lock: false, //锁定位置
		    lockX: false, //锁定水平位置
		    lockY: false, //锁定垂直位置
		    maxContainer: document.documentElement || document.body, //指定限制容器
		    onStart: function () { }, //开始时回调函数
		    onMove: function () { }, //拖拽时回调函数
		    onStop: function () { }  //停止时回调函数//停止时回调函数
		};
        for (var p in options) this.options[p] = options[p]
    },
    //获取id
    $: function (id) {
        return typeof id === "string" ? document.getElementById(id) : id
    },
    //添加绑定事件
    addHandler: function (oElement, sEventType, fnHandler) {
        return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
    },
    //删除绑定事件
    removeHandler: function (oElement, sEventType, fnHandler) {
        return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)
    },
    //绑定事件到对象
    bind: function (object, fnHandler) {
        return function () {
            return fnHandler.apply(object, arguments)
        }
    }
};




/*绑定事件*/
function addEvent(obj, sType, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(sType, fn, false);
	} else {
		obj.attachEvent('on' + sType, fn);
	}
};
function prEvent(ev) {
	var oEvent = ev || window.event;
	if (oEvent.preventDefault) {
		oEvent.preventDefault();
	}
	return oEvent;
}

/*添加滑轮事件*/
function addWheelEvent(obj, callback) {
	if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
		addEvent(obj, 'DOMMouseScroll', wheel);
	} else {
		addEvent(obj, 'mousewheel', wheel);
	}
	function wheel(ev) {
		var oEvent = prEvent(ev),
		delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
		callback && callback.call(oEvent, delta);
		return false;
	}
};
/*增-点击事件*/
function addClickEvent(obj, callback) {
	if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
		addEvent(obj, 'mousedown', wheel);
	} else {
		addEvent(obj, 'click', wheel);
	}
	function wheel(ev) {
		var oEvent = prEvent(ev),
		delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
		callback && callback.call(oEvent, delta);
		return false;
	}
};
/*减-点击事件*/
function minusClickEvent(obj, callback) {
	if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
		addEvent(obj, 'mousedown', wheel);
	} else {
		addEvent(obj, 'click', wheel);
	}
	function wheel(ev) {
		var oEvent = prEvent(ev),
		delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
		callback && callback.call(oEvent, delta);
		return false;
	}
};
/*还原-点击事件*/
function centerClickEvent(obj, callback) {
	if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
		addEvent(obj, 'mousedown', wheel);
	} else {
		addEvent(obj, 'click', wheel);
	}
	function wheel(ev) {
		var oEvent = prEvent(ev),
		delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
		callback && callback.call(oEvent, delta);
		return false;
	}
};
 

//应用
window.onload = function () {
    oBox = document.getElementById("translate-group");
    var oTitle = document.getElementById("move1");
    var oSpan = document.getElementById("t_span");
    var oDrag = new Drag(oBox, { handle: oTitle, limit: false });
    canvarDrag = oDrag;
    var addWh = new addWheelEvent(oBox);

    var aInput = document.getElementsByTagName("input");


    //锁定范围接口
    aInput[0].onclick = function () {
    };

    var oAdd = document.getElementById("drag_add_btn");
    var oDrag2 = new Drag(oBox, { handle: oAdd, limit: false });
    var oMinus = document.getElementById("drag_minus_btn");
    var oDrag3 = new Drag(oBox, { handle: oMinus, limit: false });
    var oCenter = document.getElementById("drag_center_btn");
    var oDrag4 = new Drag(oBox, { handle: oCenter, limit: false });

    var canvas = document.getElementById("treeCanvas");
    var oDragCanvas = new Drag(oBox, { handle: canvas, limit: false });

    var posDragMove = 1;
    var moveDrag = 0.1;

    //现在屏幕的分辨率
    //var currentScale = 1;

    var treeZoomStatus = "big";
    var numHandle = document.getElementById("numHandle");
     
    //数据伸缩
    zoomDisplay = function (op,topicture) {
        console.log(op);
        
        $(".text_size_big").find("span").css({"font-size":'14px'});
        $(".ajp_scale,.ajp_scale_mian").css({"width":"40px"});
        $(".sc_item").css({"padding-left":"10px"});
        if (op > 0.6) {
            for (var j = 0; j < jpnodes.length; j++) {
                var n = jpnodes[j];
                var div = $("[nodeid=" + n.id + "]");

                if (div ) {
                    if( div.attr("bightml"))
                    {
                        div.html(div.attr("bightml")).attr("bightml", "");
                        div.removeClass("female-small").removeClass("male-small");
                    }
                    else{
                        break;
                    }
                }
            }
        }
        else {
            for (var j = 0; j < jpnodes.length; j++) {
                var n = jpnodes[j];
                var div = $("[nodeid=" + n.id + "]");
                if (div ) {
                    if( !div.attr("bightml"))
                    {
                        var html = "";
                        var namehtml="";
                      
                        for(var sj=0;sj<n.name.length;sj++){
                            namehtml+="<div class='name'>"+ n.name[sj]+"</div>";
                        }
                        if (n.sex == "1") {
                            html = $('<div class="female full-name-t c-3B3B3B fz62 b-a7cbca"  >' + namehtml + '</div>');
                            div.addClass("male-small");
                        }
                        else {
                            html = $('<div class="female full-name-t  c-3B3B3B fz62 b-dfa296" >' + namehtml + '</div>');
                            div.addClass("female-small");
                        }
                        div.attr("bightml", div.html()).html(html);
                        if(n.name.length>2 ){
                            if(sxSetting.fontstatic==1)
                            {
                                html.addClass('moreFonts').attr('name-text',n.name);
                            }
                            else
                            {
                                html.addClass('female-3');
                            }
                        }
                    }
                    else{
                        break;
                    }
                }
            }
            //数据处理  
            if(nodeSmall==1)
            {
                $(".text_size_big").find("span").css({"font-size":'20px' ,"line-height":"0.9", "margin-top":"0.5em", "font-weight":"normal"});
            }
            else{
                $(".text_size_big").find("span").css({"font-size":'40px' ,"line-height":"0.9", "margin-top":"0.5em", "font-weight":"normal"});
            }
            $(".text_size_big").find("span").each(function(){
                var len= $(this).text().toString().length;
                var top="";
                if(len<=3){
                    top="1.2em";
                }
                if(len==4){
                    top="0.6em";
                }
                if(len==5){
                    top="0.1em";
                }
                $(this).css({"margin-top":top});
            });
            $(".ajp_scale,.ajp_scale_mian").css({"width":"120px"});
            $(".sc_item").css({"padding-left":"40px"});
            if(nodeSmall==1)
            {
                $(".ajp_scale,.ajp_scale_mian").css({"width":"60px"});
                $(".sc_item").css({"padding-left":"20px"});
            }
        }
        $(".divWrap").css({"background":"url(/assets/jiapu/images/tree-bg.png)"});
        $(".container").css({"background-color":"","border": "none"});
        $(".b-a7cbca,.b-dfa296").css({"background-color":""});

        if(topicture && op< 0.6){
            $(".container").css({"background-color":"#fff","border": "1px","  border-color": "#dedede","border-style": "solid"});
            $(".b-a7cbca,.b-dfa296").css({"background-color":"#fff"});
            $(".divWrap").css({"background":"url(/assets/jiapu/images/tree-bg-bai.png)"});
        }
        
        oBox.style.transform = "scale(" + op + ")";
        console.log(op);
        posDragMove = op;
        currentScale = op;
        canvasScaleOp = op; 
        if($(".ajp_scale").length>0){
            var left=$("#translate-group").css("left");
            $(".ajp_scale").css({"left": (- parseInt(left.replace("px",""))/op)+"px"}).attr("left",left).attr("op",op);
        }
        console.log('end zoom go link ' + new Date().toDateString());
        links();
        AfterMoveLink();
        if($(".ctr-figure-curr").length>0)
        {
            $nodeinfo= $nodes[$(".ctr-figure-curr").attr('nodeid')];
            setNodeCenter($nodeinfo);
        }
        else{
            setNodeCenter($root);
        }
        
    };
      /*以鼠标位置为中心的滑轮放大功能*/
    (function () {
        function publicEvent(pe) {

        }
        addWheelEvent(oTitle, function (delta) {
       
            var _maxValue = delta ? currentScale - moveDrag : currentScale + moveDrag;

            var op = posDragMove;
            if (op < _maxValue) {
                op += moveDrag;
            } else {
                op -= moveDrag;
            }
            if (op > 1 || op <=0.2 || _maxValue > 2 || _maxValue < 0) { return; }
            with (numHandle.style) {
                bottom = (op - 0.2) / 0.8 * 200 + 'px';
            };
            with (oBox.style) {
                console.log('oBox left');
                //left = op + '%';
                //top = op + '%';
            }
            zoomDisplay(op);
        });
        addClickEvent(oAdd, function (delta) {
            var _maxValue = delta ? currentScale + moveDrag : currentScale - moveDrag;
            console.log(_maxValue);

            var op = posDragMove;
            if (op < _maxValue) {
                op += moveDrag;
                if (op > 1 || op <= 0.2 || _maxValue > 2 || _maxValue < 0) { return; }
                oBox.style.transform = "scale(" + op + ")";
                with (numHandle.style) {
                    bottom = (op-0.2)/0.8 * 200 + 'px';
                };
                with (oBox.style) {
                   // left = op + '%';
                  //  top = op + '%';
                }
            }
            if (op > 1 || op <= 0.1 || _maxValue > 2 || _maxValue < 0) { return; }
            zoomDisplay(op);
        });
        minusClickEvent(oMinus, function (delta) {
            var _maxValue = !delta ? currentScale + moveDrag : currentScale - moveDrag;

            var op = posDragMove;
            console.log(_maxValue);

            if (op > 0) {
                op -= moveDrag;
                if (op > 1 || op <=0.2 || _maxValue > 2 || _maxValue < 0) { return; }
                oBox.style.transform = "scale(" + op + ")";
                with (numHandle.style) {
                    bottom = (op - 0.2) / 0.8 * 200 + 'px';
                };
                with (oBox.style) { 
                }
            }
            if (op > 1 || op <=0.2 || _maxValue > 2 || _maxValue < 0) { return; }
            zoomDisplay(op);
           
        });
        centerClickEvent(oCenter, function (delta) {
            
            var op = 1;
            oBox.style.transform = "scale(" + op + ")";
            with (numHandle.style) {
                bottom = (op - 0.2) / 0.8 * 200 + 'px';
            };
            with (oBox.style) {
               // left = op + '%';
                //top = op + '%';
            }
            zoomDisplay(1);
          
        });
    })();
};